<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../css/common.css">
</head>
<body>
<!--轮播图-->
  <div class="justify-content-center"  >
      <div id="slideshow" >
        <img id="SlideshowOne"   src="../img/banner_03_1y5v.jpg" alt="">
        <div class="justify-content-center OptionButton" >
          <div id="OptionButtonOne"></div>
          <div id="OptionButtonTwo"></div>
        </div>
      </div>
  </div>
</body>
</html>
<style>
  #slideshow{
    position: relative;
  }
  #OptionButtonOne,#OptionButtonTwo{
    width: 10px;
    height: 10px;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    background: white;
  }
  #slideshow>img{
    width: 1000px;
    height: 350px;
  }
  .OptionButton{
    position: absolute;
    z-index: 5;
    top: 300px;
    left: 500px;
  }
</style>
<script src="../js/slideshow.js"></script>
<!--<script>-->
<!--  var img = document.getElementById("SlideshowOne");-->
<!--  var slideshow = document.getElementById("slideshow");-->
<!--  var OptionButtonOne = document.getElementById("OptionButtonOne");-->
<!--  var OptionButtonTwo = document.getElementById("OptionButtonTwo");-->
<!--  var index = 1;-->
<!--  var timer;-->
<!--  window.onload = function () {-->
<!--    function lunbo(){-->
<!--      //获取img对象-->
<!--      if (index == 1){-->
<!--        img.src = "../img/banna_03_fd4q.jpg";-->
<!--        index=0;-->
<!--        // alert(index)-->
<!--      }else{-->
<!--        img.src = "../img/banner_03_1y5v.jpg";-->
<!--        index = 1;-->
<!--      }-->
<!--    }-->
<!--    //2.定义定时器-->
<!--   timer = setInterval(lunbo,2000);-->
<!--  slideshow.onmouseover = function (){-->
<!--    // alert("onmouseover我进来了");-->
<!--    clearInterval(timer);-->
<!--  }-->
<!--  slideshow.onmouseout = function (){-->
<!--    // alert("onmouseout我进来了");-->
<!--    //2.定义定时器-->
<!--    timer = setInterval(lunbo,2000);-->
<!--  }-->
<!--  OptionButtonOne.onmouseover = function (){-->
<!--    // alert("onmouseover我进来了");-->
<!--    img.src = "../img/banner_03_1y5v.jpg";-->
<!--    OptionButtonOne.style.background="red";-->
<!--    OptionButtonTwo.style.background="white";-->
<!--    // clearInterval(timer);-->
<!--  }-->
<!--  OptionButtonTwo.onmouseover = function (){-->
<!--    // alert("onmouseover我进来了");-->
<!--    img.src = "../img/banna_03_fd4q.jpg";-->
<!--    OptionButtonOne.style.background="white";-->
<!--    OptionButtonTwo.style.background="red";-->
<!--    // clearInterval(timer);-->
<!--  }-->
<!--  }-->
<!--</script>-->
